import React, { Component } from 'react';
import styled from 'styled-components/native';
import Touchable from '@appandflow/touchable';
import { MaterialIcons, SimpleLineIcons } from '@expo/vector-icons';

import { colors, strings, dimens } from '../../utils/constants';

const ICON_SIZE = 32;
const ICON_RADIUS = 2;
const PADDING = 10;
const DEFAULT_BACKGROUND_COLOR = colors.LITE_GRAY;
const TITLE_FONT_SIZE = 17;
const DES_FONT_SIZE = 12;
const DOT_SIZE = 10;
const DOT_RADIUS = DOT_SIZE / 2;
const NEW_MSG_TAG_HEIGHT = 20;
const NEW_MSG_TAG_RADIUS = 10;

const Root = styled(Touchable).attrs({
  feedback: 'opacity'
})`
  flexDirection: row;
  width: 100%;
  alignItems: center;
  paddingLeft: ${PADDING};
  paddingRight: ${PADDING};
  paddingTop: ${PADDING};
  paddingBottom: ${PADDING};
  backgroundColor: ${colors.WHITE};
  borderColor: ${colors.HR};
  borderTopWidth: ${dimens.HR_WIDTH};
  borderBottomWidth: ${props => props.isShowBottomDivider ? dimens.HR_WIDTH : 0};
`;

const Icon = styled.View`
  width: ${ICON_SIZE};
  height: ${ICON_SIZE};
  alignItems: center;
  justifyContent: center;
  backgroundColor: ${props => props.backgroundColor || DEFAULT_BACKGROUND_COLOR};
  borderRadius: ${ICON_RADIUS};
`;

const Title = styled.Text`
  fontSize: ${TITLE_FONT_SIZE};
  color: ${colors.PRIMARY_TEXT};
  marginLeft: 10;
`;

const Description = styled.Text`
  fontSize: ${DES_FONT_SIZE};
  color: ${colors.SECONDARY_TEXT};
  marginLeft: 5;
`;

const Space = styled.View`
  flex: 1;
  height: 100%;
`;

const ArrowRight = styled(SimpleLineIcons) `
  color: ${colors.SECONDARY_TEXT};
`;

const NewDot = styled.View`
  width: ${DOT_SIZE};
  height: ${DOT_SIZE};
  borderRadius: ${DOT_RADIUS};
  backgroundColor: ${colors.NEW_MSG_BACKGROUND_COLOR};
`;

const NewMsgTag = styled.View`
  height: ${NEW_MSG_TAG_HEIGHT};
  backgroundColor: ${colors.NEW_MSG_BACKGROUND_COLOR};
  borderRadius: ${NEW_MSG_TAG_RADIUS};
  paddingLeft: 8;
  paddingRight: 8;
  alignItems: center;
  justifyContent: center;
`;

const NewMsgTagText = styled.Text`
  fontSize: 14;
  color: ${colors.WHITE};
`;

class SettingFullButton extends Component {
  render() {
    const {
      title, description, newMsgCount = 0, icon, backgroundColor,
      isShowArrow = false,
      isShowBottomDivider = false,
      isShowNewDot = false
    } = this.props;

    return (
      <Root isShowBottomDivider={isShowBottomDivider}>
        <Icon backgroundColor={backgroundColor}>
          {icon || <MaterialIcons size={26} color={colors.WHITE} name="settings-applications" />}
        </Icon>
        <Title>{title || strings.SETTINGS_TITLE_DEFAULT}</Title>
        {description && <Description>{description}</Description>}
        <Space />
        {isShowArrow && <ArrowRight size={14} name="arrow-right" />}
        {isShowNewDot && <NewDot />}
        {
          newMsgCount > 0 &&
          <NewMsgTag>
            <NewMsgTagText>{newMsgCount}</NewMsgTagText>
          </NewMsgTag>
        }
      </Root>
    );
  }
}

export default SettingFullButton;
